<template>
  <div class="regionBox">
    <div
      style="height: 50px; lineheight: 50px; textalign: left; fontweight: bold"
    >
      <span>报价单名称：</span> <span>{{ quotationName }}</span>
      <el-button
        icon="el-icon-edit"
        style="marginleft: 20px"
        size="small"
        type="text"
        @click="editTitle"
        >编辑</el-button
      >
    </div>
    <div>
       <div style="height:30px;lineHeight:30px;fontWeight:bold">报价基数：{{titleForm.scale}}</div>
        <el-button type="primary" size="small" @click="addRegion"
        >新建区域</el-button
      >
      <!-- <el-form style="marginTop:20px">
        <el-form-item label="报价基数:">
          <el-input
            placeholder="设置报价基数"
            v-model="titleForm.scale"
            style="width: 100px"
          ></el-input>
          <el-button
            type="primary"
            style="marginLeft: 20px"
            size="small"
            @click="setScale"
            >确定</el-button
          >
        </el-form-item>
      </el-form> -->
    </div>
    <el-dialog title="修改报价单名称" :visible.sync="titTleDia" width="30%">
      <el-form
        ref="addEditform"
        :rules="addEditformRules"
        :model="titleForm"
        label-width="100px"
        width="90%"
        style="marginLeft:7%"
      >
        <el-form-item label="报价类型：" prop="type">
          <el-select v-model="titleForm.type" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item  label="报价名称：" prop="quoteTitle">
          <el-input style="width:217px" v-model="titleForm.quoteTitle"></el-input>
        </el-form-item>
        <el-form-item label="报价基数" prop="scale">
          <el-input style="width:217px" v-model="titleForm.scale"></el-input>
        </el-form-item>
        <el-form-item label="备注：" prop="remakk">
          <el-input style="width:217px" v-model="titleForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="titTleDia= false">取 消</el-button>
        <el-button type="primary" @click="TitleEdit">保存</el-button>
      </div>
    </el-dialog>
    <!-- 区域列表 -->
    <div>
      <el-card
        class="box-card"
        v-for="item in regionList"
        :key="item.id"
        style="margin: 20px 0px"
      >
        <div slot="header" class="clearfix">
          <div style="textalign: center; fontweight: bold">
            {{ item.areaName }}
          </div>
          <el-button
            style="float: right"
            type="danger"
            plain
            size="mini"
            @click="deletRegion(item.id)"
            >删除</el-button
          >
          <el-button
            style="float: right; marginright: 20px"
            type="primary"
            size="mini"
            @click="addExhi(item)"
            >新建</el-button
          >
        </div>
        <div v-for="_item in item.displayList" :key="_item.id">
          <el-collapse v-model="activeNames" @change="handleChangeZD(_item)">
            <el-collapse-item
              :title="_item.displayName + ' ' + ' ' + '详情'"
              :name="_item.displayName"
            >
              <div class="Exhibition">
                <span
                  ><el-button
                    type="primary"
                    size="mini"
                    @click="editExhibition(_item)"
                    >编辑</el-button
                  >
                  <el-button
                    type="danger"
                    plain
                    style="color: red"
                    size="mini"
                    @click="deleteZX(_item)"
                    >删除</el-button
                  ></span
                >
              </div>
              <table>
                <tr>
                  <th>产品名称</th>
                  <th>产品型号</th>
                  <th>产品参数</th>
                  <th>单位</th>
                  <th>产品数量</th>
                  <th>未税单价</th>
                  <th>未税总价</th>
                  <th>税金</th>
                  <th>未税成本</th>
                  <th>未税成本总价</th>
                  <th>演示方式</th>
                </tr>
                <tr v-for="(listItem, indexList) in myarr" :key="listItem.id">
                  <td style="width: 90px">
                    <div
                      @click="listItem.flag = false"
                      v-if="listItem.flag == true"
                    >
                      {{ listItem.productName }}
                    </div>
                    <el-input
                      style="width: 90px"
                      @change="myBlur(listItem)"
                      v-else
                      type="text"
                      v-model="listItem.productName"
                    ></el-input>
                  </td>
                  <td style="width: 70px">
                    <div
                      @click="listItem.flag = false"
                      v-if="listItem.flag == true"
                    >
                      {{ listItem.model }}
                    </div>
                    <el-input
                      style="width: 60px"
                      @change="myBlur(listItem)"
                      v-else
                      type="text"
                      v-model="listItem.model"
                    ></el-input>
                  </td>
                  <td style="width: 250px; height: 150px">
                    <div
                      :title="listItem.param"
                      class="overCell"
                      @change="listItem.flag = false"
                      v-if="listItem.flag == true"
                    >
                      {{ listItem.param }}
                    </div>
                    <el-input
                      style="width: 250px"
                      :rows="3"
                      @change="myBlur(listItem)"
                      v-else
                      type="textarea"
                      v-model="listItem.param"
                    ></el-input>
                  </td>
                  <td style="width: 70px">
                    <div
                      @click="listItem.flag = false"
                      v-if="listItem.flag == true"
                    >
                      {{ listItem.unit }}
                    </div>
                    <el-input
                      style="width: 70px"
                      :rows="2"
                      @change="myBlur(listItem)"
                      v-else
                      type="text"
                      v-model="listItem.unit"
                    ></el-input>
                  </td>
                  <td style="width: 70px">
                    <div
                      @click="listItem.flag = false"
                      v-if="listItem.flag == true"
                    >
                      {{ listItem.productCount }}
                    </div>
                    <el-input
                      style="width: 50px"
                      @change="myBlur(listItem)"
                      v-else
                      type="text"
                      v-model="listItem.productCount"
                    ></el-input>
                  </td>
                  <td style="width: 100px">
                    <div
                      @click="listItem.flag = false"
                      v-if="listItem.flag == true"
                    >
                      {{ listItem.userPrice }}
                    </div>
                    <el-input
                      style="width: 90px"
                      @change="myBlur(listItem)"
                      v-else
                      type="text"
                      v-model="listItem.userPrice"
                    ></el-input>
                  </td>
                  <td style="width: 100px">
                    {{ listItem.userPriceCount }}
                  </td>
                  <td style="width: 60px">
                    <div
                      @click="listItem.flag = false"
                      v-if="listItem.flag == true"
                    >
                      {{ listItem.taxes }}
                    </div>
                    <el-input
                      style="width: 50px"
                      @change="myBlur(listItem)"
                      v-else
                      type="text"
                      v-model="listItem.taxes"
                    ></el-input>
                  </td>
                  <td style="width: 100px">
                    <div
                      @click="listItem.flag = false"
                      v-if="listItem.flag == true"
                    >
                      {{ listItem.customerPrice }}
                    </div>
                    <el-input
                      style="width: 90px"
                      @change="myBlur(listItem)"
                      v-else
                      type="text"
                      v-model="listItem.customerPrice"
                    ></el-input>
                  </td>
                  <td style="width: 100px">
                    {{ listItem.customerPriceCount }}
                  </td>
                  <td
                    style="width:150px"
                    v-if="indexList == 0"
                    :rowspan="myarr.length"
                  >
                    <div
                      class="overCell"
                      style="width:150px"
                      v-if="showTypeFlag == true"
                      @click="editEvent(listItem)"
                      :title="showTypeEdit.showType"
                    >
                      {{ showTypeEdit.showType ? showTypeEdit.showType : "无" }}
                    </div>
                    <el-input
                      @blur="changeBlur"
                      style="width:150px"
                      type="textarea"
                      :rows="3"
                      v-model="showTypeEdit.showType"
                      v-else-if="showTypeFlag == false"
                    ></el-input>
                  </td>
                </tr>
              </table>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-card>
    </div>
    <!-- 新建区域弹窗 -->
    <el-dialog title="区域创建" :visible.sync="dialogVisibleOne" width="30%">
      <el-form
        :model="regionForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="区域名称" prop="areaName">
          <el-input v-model="regionForm.areaName"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="regionForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleOne = false">取 消</el-button>
        <el-button type="primary" @click="determine">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  areaAdd,
  priview,
  areaDelete,
  displayAdd,
  displayDelete,
  quoteEdit,
  showType,
  displayProductEdit,
  identifier
} from "@/api/request/dept";
import { catalogList } from "@/api/request/classify";
import { productList } from "@/api/request/product";
import { removal } from "@/utils/removal";
import storage from "@/utils/storage";
export default {
  name: "region",
  data() {
    return {
      myarr: [],
      options: [
        {
          value:"1",
          label: "展厅预算",
        },
        {
          value:"2",
          label: "大屏预算",
        },
        {
          value:"3",
          label: "弱点项目预算",
        },
      ],
      showTypeEdit: {
        //演习方式
        showType: "",
        id: "",
      },
      showEdit: false,
      showTypeFlag: true,
      mergeCells: [
        { row: 0, col: 4, rowspan: 1000, colspan: 0 },
        { row: 0, col: 10, rowspan: 1000, colspan: 0 },
      ],
      allAlign: null,
      activeNames: ["1"],
      ExhiTitle: "新建展项",
      btnName: "编辑",
      titTleDia: false,
      areaName: "",
      titleForm: {
        type: "",
        quoteTitle: "",
        remark: "",
        id: "",
        scale: "",
      },
      addEditformRules: {
        quoteTitle: [
          { required: true, message: "报价单名称不能为空", trigger: "blur" },
        ],
      },
      quotationName: "报价单名称",
      dialogVisibleOne: false, //区域创建弹窗
      dialogVisibleTwo: false, //新建展项弹窗
      dialogVisibleThree: false, //查看详情弹窗
      catalogNameList: [], //产品类别列表
      productList: [], //产品列表
      selectedProList: [], //已经选择的产品列表
      Allselect: [], //所有选中的包括回填的
      value: "", //下拉框选中的值
      num: 0,
      input: "", //搜索值
      Loading: false, //数据加载
      productListPage: {
        //产品列表分页
        catalogId: 1, //分类id
        productName: "", //设备名称
        pageNum: 1, //页码
        pageSize: 10, //条数
      },
      addExhiProdct: {
        //添加展项及产品清单
        displayName: "",
        remark: "",
        aeraId: "",
        id: "",
        productList: [],
      },
      productListTotal: 0, //产品列表总数
      regionForm: {
        quoteId: "",
        areaName: "",
        remark: "",
      },
      rules: {
        areaName: [
          { required: true, message: "请输入区域名称", trigger: "blur" },
        ],
      },
      addExhiProRules: {
        //添加展项和产品清单验证规则
        displayName: [
          { required: true, message: "请输入展项名称", trigger: "blur" },
        ],
      },
      regionList: [], //区域列表
      regionListId: "", //区域id
      checkList: [], //区域删除复选框数组
      //查看详情弹窗数据列表
      detailsPrucdctName: "", //详情标题
      detailTableList: "", //table数据
    };
  },
  computed: {
    //衍生数据到时候好用于计数器
    newProductList() {
      let newArr = JSON.parse(JSON.stringify(this.productList));
      return newArr.map((item) => {
        item.num = 0;
        item.productType = 0;
        return item;
      });
    },
  },
  mounted() {
    this.quotationName = storage.quoteId
      ? storage.quoteId.quotoTitle
      : quotoTitle;
  
    this.titleForm.quoteTitle = storage.quoteId.quoteTitle;
    this.titleForm.id = storage.quoteId.id;
    this.regionForm.quoteId = storage.quoteId.id;
  
    if (storage.quoteId.id) {
      this.getList();
    }
    catalogList().then(
      (res) => {
        this.catalogNameList = res.rows;
       
      },
      (err) => {
       
      }
    );
    identifier(this.titleForm.id ).then(res=>{
        
          this.titleForm.type=res.data.type
          this.titleForm.quoteTitle=res.data.quotoTitle
          this.titleForm.scale=res.data.scale
       },err=>{
       
       })
  },
  methods: {
    setScale() {
      quoteEdit(this.titleForm).then(
        (res) => {
         
          this.titTleDia = false;
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.titTleDia = false;
          this.quotationName = this.titleForm.quoteTitle;
        },
        (err) => {
         
          this.$message({
            message: "修改失败",
            type: "error",
          });
        }
      );
    },
    getFlag(data) {
      let newarr = data.map((item) => {
        return { ...item, flag: true };
      });
      return newarr;
    },
    handleChangeZD(val) {
      this.myarr = this.getFlag(val.productList);
     
      this.showTypeEdit.showType = val.showType;
      this.showTypeEdit.id = val.id;
    },
    changeBlur() {
      this.showTypeFlag = true;
      showType(this.showTypeEdit).then(
        (res) => {
         
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.showEdit = false;
          this.getList();
          this.$forceUpdate();
        },
        (err) => {
          this.$message({
            message: "修改失败",
            type: "error",
          });
        
        }
      );
    },
    myBlur(row) {
        row.userPrice=row.customerPrice*this.titleForm.scale
       row.userPriceCount = row.productCount * row.userPrice;
       row.customerPriceCount= row.productCount * row.customerPrice;
      let obj = {
        displayProductId: row.id,
        productName: row.productName,
        brand: row.brand,
        param: row.param,
        model: row.model,
        unit: row.unit,
        service: row.service,
        customerPrice: row.customerPrice,
        userPrice: row.userPrice,
        taxes: row.taxes,
        productCount: row.productCount,
      };
      row.flag = true;
    
      this.$confirm("是否修改此条信息?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
         
          displayProductEdit(obj).then(
            (res) => {
              this.$message({
                message: "修改成功",
                type: "success",
              });
                 
                this.getList();
            },
            (err) => {
              this.$message({
                message: "修改失败",
                type: "error",
              });
              this.getList();
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消修改",
          });
           this.getList();
           this.$forceUpdate();
          
        });
    },
    editEvent(row) {
      this.showTypeFlag = false;
    },
    //    修改演习方式
    EditShowType(row) {
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
   
      if (rowIndex === 0 && columnIndex === 4) {
        return {
          rowspan: 100,
          colspan: 1,
        };
      }
    },
    getkeyId(row) {
      return row.id;
    },
    getKeys() {
      return this.$uuid.v1();
    },
    editTitle() {
      this.titTleDia = true;
    },
    TitleEdit() {
      this.$refs.addEditform.validate((val) => {
        if (val) {
            this.$confirm("是否确认修改?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          quoteEdit(this.titleForm).then(
            (res) => {
            
              this.$message({
                message: "修改成功",
                type: "success",
              });
              this.titTleDia = false;
              this.getList();
            },
            (err) => {
              this.$message({
                message: "很遗憾,修改失败",
                type: "error",
              });
            
            }
          );
        })
        .catch(() => {});
        } else {
          return false;
        }
      });
    },
    //点击搜索查询产品列表
    searchProduct() {
      this.getProductList();
    },
    gaibian(sec, row) {
    
      this.Allselect.forEach((item, index) => {
        if (item.id == row.id) {
          this.Allselect.splice(index, 1);
        }
      });
    },
    //获取产品列表
    getProductList() {
      this.Loading = true;
      // 根据类别获取产品列表
      productList(this.productListPage).then(
        (res) => {
          this.Loading = false;
          this.productList = res.rows;
          this.productListTotal = res.total;
        
        },
        (err) => {
         
        }
      );
    },
    //复选框
    handleSelectionChange(val) {
      let arr = removal(val, this.Allselect);
      this.Allselect = arr;
     
    },
    //删除展项已经添加的产品
    deleteSeleted(val) {
    
      this.Allselect.forEach((item, index) => {
        if (this.ExhiTitle === "添加展项") {
          if (item.id === val.id) {
            this.$refs.multipleTable.toggleRowSelection(item, false);
            this.Allselect.splice(index, 1);
          }
        } else {
          if (item.productId === val.productId) {
            this.Allselect.splice(index, 1);
          }
          this.productList.forEach((item) => {
            if ((item.id = item.productId)) {
              this.$refs.multipleTable.toggleRowSelection(item, false);
            }
          });
        }
      });
    },
    //  计数器改变时
    handleChange() {},
    //新建区域确定
    determine() {
      this.$refs.ruleForm.validate((val) => {
        if (val) {
         
          areaAdd(this.regionForm).then(
            (res) => {
             
              this.$message({
                message: "恭喜你，新增区域成功",
                type: "success",
              });
              this.dialogVisibleOne = false;
              this.getList();
            },
            (err) => {
           
              this.$message({
                message: "很遗憾,新增区域失败",
                type: "error",
              });
            }
          );
        } else {
          return false;
        }
      });
    },
    //   增加区域
    addRegion() {
      this.dialogVisibleOne = true;
      this.regionForm.areaName = "";
      this.regionForm.remark = "";
    },
    //删除区域
    deletRegion(id) {
      this.$confirm("是否确认删除该区域?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          areaDelete([id]).then(
            (res) => {
            
              this.$message({
                message: "恭喜你,删除区域成功",
                type: "success",
              });
              this.getList();
            },
            (err) => {
              this.$message({
                message: "很遗憾,删除区域失败",
                type: "error",
              });
             
            }
          );
        })
        .catch(() => {});
    },
    // 获取区域列表
    getList() {
      priview({ id: this.regionForm.quoteId }).then(
        (res) => {
          this.regionList = res.data.areaList;
         
        },
        (err) => {
        
        }
      );
    },
    // 新建展项
    addExhi(item) {
    
      storage.title = "添加展项";
      this.$router.push({
        path: "/adddisplay",
        query: {
          id: item.id,
          areaName: item.areaName,
        },
      });
    },
    //  删除展项
    deleteZX(row) {
    
      displayDelete(row.id).then(
        (res) => {
        
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getList();
        },
        (err) => {
          this.$message({
            message: "删除失败",
            type: "error",
          });
        }
      );
    },
    // 编辑展项
    editExhibition(row) {
    
      storage.displayEdiet = row;
     
      //  storage.quoteId=this.regionForm.quoteId
      storage.title = "编辑展项";
      this.$router.push({
        path: "/adddisplay",
      });
    },
    seeOpen(row) {
      this.dialogVisibleThree = true;
    
      this.detailsPrucdctName = row.productName;
      this.detailTableList = row;
    },
    //   分页
    handleSizeChange(val) {
      this.productListPage.pageSize = val;
      this.getProductList();
    },
    handleCurrentChange(val) {
    
      this.productListPage.pageNum = val;
      this.getProductList();
    },
  },
};
</script>

<style scoped>
.regionBox {
  width: 96%;
  margin-left: 2%;
  margin-top: 20px;
  padding: 20px;
  border: 1px solid grey;
}
.page {
  margin: 20px 0px;
  height: 50px;
  display: flex;
  justify-content: flex-end;
}
.item {
  height: 50px;
  padding: 5px 0px;
  line-height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
}
.Exhibition {
  height: 30px;
  line-height: 30px;
  display: flex;
  margin-bottom: 10px;
  justify-content: flex-end;
}
table {
  border-collapse: collapse;
  text-align: center;
  font-size: 12px;
}
td,
th {
  width: 150px;
  height: 30px;
  border-collapse: collapse;
  border: 1px solid grey;
}
.overCell {
  width: 250px;
  height: 70px !important;
  padding: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: wrap;
}
.bgc {
  background-color: black;
}
th {
  background-color: #ccc;
}
</style>